<template>
  <!-- 巡检结果 -->
  <div class="inspection-result-box">
    <table />
    <div class="plan-header-box">
      <div class="subtitle-box startbox">
        <div class="icon centerbox">
          <span>检</span>
        </div>
        <div class="name">巡检结果</div>
      </div>
      <div class="return-btn">
        <div class="return">
          <span @click="goBack"></span>
        </div>
      </div>
    </div>
    <div class="cont-box betweenbox">
      <div class="left colbetweenbox">
        <div class="top">
          <table />
          <div class="condition-search">
            <el-form
              ref="elForm"
              :model="formData"
              size="medium"
              label-width="120px"
              class="elform"
            >
              <el-row :gutter="25">
                <el-col :span="12">
                  <el-row :gutter="10">
                    <el-col :span="24">
                      <el-form-item label="变电站：" prop="time">
                        <el-select
                          v-model="formData.substation_value"
                          filterable
                          size="small"
                          placeholder="全部"
                          :style="{width: '100%'}"
                        >
                          <el-option
                            v-for="item in SubstationList"
                            :key="item.code"
                            :label="item.name"
                            :value="item.code"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>

                <el-col :span="12">
                  <el-row :gutter="10">
                    <el-col :span="24">
                      <el-button
                        type="primary"
                        @click="submitForm"
                      >查询</el-button>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div class="self-table mediumtablestyle">
            <el-table
              :data="newtableData"
              style="width: 100%"
              height="100%"
              @selection-change="handleSelectionChange"
              @row-dblclick="rowClick"
              :row-class-name="tableRowClassName"
              border
            >
              <el-table-column prop="BDZMC" label="变电站名称" width="140" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="XSZT" width="120" label="状态" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <div :class="scope.row.XSZT | collectionValueFilter">{{scope.row.XSZT}}</div>
                </template>
              </el-table-column>
              <el-table-column
                width="120"
                prop="WQRYCS"
                label="未确认异常数"
                :show-overflow-tooltip="true"
              ></el-table-column>

              <el-table-column
                width="120"
                prop="WQRBGS"
                label="未确认报告数"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column width="120" prop="FKSL" label="辅控异常数" :show-overflow-tooltip="true"></el-table-column>
            </el-table>
          </div>
        </div>
        <div class="bottom betweenbox">
          <div>
            <EasyPie3 :dataList="newreportData" :colorList="report_colorList" @click="toInspection"></EasyPie3>
          </div>
          <div>
            <EasyPie3
              :dataList="newpointData"
              :colorList="abnormalPosi_colorList"
              @click="toAbnormalTotal"
            ></EasyPie3>
          </div>
          <div>
            <EasyPie4 :dataList="newresultData" :colorList="abnormal_colorList" @click="toAbnormal"></EasyPie4>
          </div>
        </div>
      </div>
      <div class="right centerbox" id="xjjg">
        <!-- <span>视频内容</span> -->
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import EasyPie3 from "../echa/EasyPie3.vue";
import EasyPie4 from "../echa/EasyPie4.vue";
import PreviewOCX from "@/utils/PreviewClass.js";
import { JointInspectionModule } from "@/store/modules/JointInspection";
interface optionList {
  value: string;
  label: string;
}
interface tableDataList {
  index: number;
  city: string;
  substation: string;
  vollevel: string;
  taskStartTime: string;
  planState: string;
  tracking: string;
  report: string;
  subPlanCheck: string;
  isCheck: string;
}
interface objType {
  row: object;
  rowIndex: number;
}
interface pagesType {
  pageSize: number;
  page: number;
  totalSize: number;
}
@Component({
  components: {
    EasyPie3,
    EasyPie4,
  },
})
export default class extends Vue {
  // 弹框状态
  public dialogVisible: boolean = false;
  // 下拉框变电站
  get SubstationList() {
    let SubstationList = JointInspectionModule.LocalCityList || [];
    console.log(SubstationList);

    return SubstationList;
  }
  //搜索框from表单数据
  public formData: any = {
    substation_value: "",
  };

  //   分页
  pages: pagesType = {
    pageSize: 10,
    page: 5,
    totalSize: 30,
  };

  // 变电站id
  private stationId = "";
  // 变电站code
  private stationCode = "";
  // 表格点击事件
  rowClick(val: any) {
    console.log("val:", val);
    (this as any).$services
      .getJqrByBdz({ data: { bdzId: val.BDZID } })
      .then((result: any) => {
        console.log(result);
        if (result.data) {
          var list = [];
          result.data.map((k) => {
            list.push({
              indexCode: k.VIDEOCODE,
              stationId: k.BDZID,
            });
          });
          this.shipinData.list = list;
          this.shipinData.stationId = list[0].stationId;
        }
      })
      .catch((err: object) => {
        console.log(err);
      });

    // this.stationId = val.stationid;
    // this.stationCode = val.stationCode;
    // // console.log("this.stationId:", this.stationId);
    // // console.log("this.stationCode:", this.stationCode);
    // let shipinData = {
    //   stationId: this.stationId,
    //   list: [
    //     {
    //       indexCode: this.stationCode,
    //       stationId: this.stationId
    //     }
    //   ]
    // };
    // this.shipinData = shipinData;
  }
  // 表格选择事件
  handleSelectionChange(val: any): void {
    // console.log(val);
    this.tableSelect = val;
  }
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: objType): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 1) {
      return "row2";
    } else {
      return "row1";
    }
  }

  //   分页
  handleSizeChange(val: any) {
    // console.log(`每页 ${val} 条`);
  }
  // 分页事件
  handleCurrentChange(val: any) {
    this.$emit("setPageIndex", val);
  }

  //返回按钮
  goBack() {
    window.history.back();
  }
  handleClose() {
    this.dialogVisible = false;
  }
  conditionQury(): void {
    // console.log("条件查询");
  }
  toInspection(val: any) {
    console.log(val, 123333333);
    var xjbg = "";
    if (val.name == "已确认报告") {
      xjbg = "1";
    } else {
      xjbg = "0";
    }
    // 跳转到巡检报告
    this.$router.push({
      name: "inspectionreport",
      query: {
        xjbg: xjbg,
      },
    });
  }
  toAbnormalTotal(val: any) {
    //跳转到异常总览
    var sfqrs = "";
    if (val.name == "已确认异常点") {
      sfqrs = "1";
    } else {
      sfqrs = "0";
    }
    this.$router.push({
      name: "abnormalstatistics",
      query: {
        yczl: "0",
        sfqr: sfqrs,
      },
    });
  }
  toAbnormal(val: any) {
    console.log(val);
    var jclx = "";
    if (val.name == "安防异常数据") {
      jclx = "042002,042001";
    }
    if (val.name == "消防异常数据") {
      jclx = "042011,042009";
    }
    if (val.name == "环境监测异常") {
      jclx = "041001,041002,041004,042008";
    }
    this.$router.push({
      name: "inspectiontype",
      query: {
        jclx,
      },
    });
  }

  PreviewOCX: any = null;
  // 初始化视频插件
  init() {
    let ocx = (this.PreviewOCX = new (PreviewOCX as any)({
      divId: "xjjg",
      theme: "",
    }));
    return ocx;
  }
  // 播放视频列表
  shipinData = {
    stationId: "",
    list: [
      {
        indexCode: "",
        stationId: "",
      },
    ],
  };
  @Watch("shipinData", { deep: true })
  setPreview(shipinData) {
    if (!this.shipinData.stationId) {
      return;
    }
    let ocx = this.PreviewOCX;
    let list = shipinData.list.slice(0, ocx.windowNumber);
    list.forEach((v) => {
      this.getPreview(v);
    });
  }
  // 获取视频流
  async getPreview(data) {
    // let data = {
    //   indexCode: "001246",
    //   stationId: "100435539",
    // };
    // console.log(data);

    await (this as any).$services
      .getPreview({ data, dataType: "text" })
      .then((xml: any) => {
        // if (xml) {
        let ocx = this.PreviewOCX;
        var winindex = ocx.getSelectWindow();
        // console.log(
        //   "winindex:" + winindex,
        //   "ocx.startPreview(winindex, xml):" + ocx.startPreview(winindex, xml)
        // );
        if (ocx.startPreview(winindex, xml) === 0) {
          if (ocx.setSelectWindow(winindex + 1) === -1) {
            ocx.setSelectWindow(0);
          }
        }
        // } else {
        //   this.$message.warning("没有找到对应的播放点！");
        // }
        return true;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  tokenCallEvent(reqID) {
    if (!this.shipinData.stationId) {
      return;
    }
    let data = {
      // stationId: "100435539",
      stationId: this.shipinData.stationId,
    };
    (this as any).$services
      .getTokens({ data, dataType: "text" })
      .then((result: any) => {
        // console.log(123, result);
        this.PreviewOCX.setToken(reqID, result);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  // 查询
  submitForm() {
    this.queryAuxRealtimeList();
  }

  // 查询当前表格数据
  queryAuxRealtimeList() {
    var form = {
      bdzId: this.formData.substation_value,
      xjzt: this.$route.query.state || "",
    };
    if (!form.bdzId) {
      Vue.delete(form, "bdzId");
    }
    // 详情页的数据列表
    (this as any).$services
      .xjData({
        method: "get",
        data: form,
      })
      .then((result: any) => {
        console.log("详情页的数据列表:", result);
        this.tableData = result.data.xjData;
        if (result.data.xjData.length > 0) {
          this.rowClick(result.data.xjData[0]);
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  // 表格数据
  public tableData = [
    {
      BDZID: "100435539",
      BDZMC: "110kV商西变电站",
      XSZT: "未巡检",
      WQRYCS: 0,
      WQRBGS: 0,
      FKSL: 0,
    },
    {
      BDZID: "42b951c5298a0c76136133a564016242b58c0a05c2",
      BDZMC: "110kV舜华变电站",
      XSZT: "未巡检",
      WQRYCS: 1,
      WQRBGS: 0,
      FKSL: 0,
    },
  ];
  tableSelect: Array<object> = [];

  get newtableData() {
    let tableData = this.tableData;
    return tableData;
  }

  // 确认/未确认报告
  private reportData = {
    wqrData: [
      {
        WQRBGS: 0,
      },
    ],
    yqrData: [
      {
        YQRBGS: 0,
      },
    ],
  };
  get newreportData() {
    let reportData = this.reportData;
    let list = [
      {
        name: "已确认报告",
        value: reportData.yqrData[0].YQRBGS || "0",
        itemStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#FF8E1B", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0,0.2)", // 100% 处的颜色
                },
              ],
              globalCoord: false, // 缺省为 false
            },
          },
        },
      },
      {
        name: "未确认报告",
        value: reportData.wqrData[0].WQRBGS || "0",
        itemStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#1466F7", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0,0.2)", // 100% 处的颜色
                },
              ],
              globalCoord: false, // 缺省为 false
            },
          },
        },
      },
    ];

    return list;
  }
  report_colorList: Array<any> = ["#FF8E1B", "#1466F7", "#FC3C2D"];

  // 确认/未确认异常点
  private pointData = {
    wqrYcData: [
      {
        WQRYCS: 4,
      },
    ],
    yqrYcData: [
      {
        YQRYCS: 1,
      },
    ],
  };
  get newpointData() {
    let pointData = this.pointData;
    let list = [
      {
        name: "已确认异常点",
        value: (pointData.yqrYcData && pointData.yqrYcData[0].YQRYCS) || "0",
        itemStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#FF8E1B", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0,0.2)", // 100% 处的颜色
                },
              ],
              globalCoord: false, // 缺省为 false
            },
          },
        },
      },
      {
        name: "未确认异常点",
        value: (pointData.wqrYcData && pointData.wqrYcData[0].WQRYCS) || "0",
        itemStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#FC3C2D", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0,0.2)", // 100% 处的颜色
                },
              ],
              globalCoord: false, // 缺省为 false
            },
          },
        },
      },
    ];
    return list;
  }
  abnormalPosi_colorList: Array<any> = ["#FF8E1B", "#FC3C2D"];

  // (安防、消防、环境)异常统计结果
  private resultData = {
    hjData: [
      {
        HJCOUNT: 0,
      },
    ],
    xfData: [
      {
        XFCOUNT: 0,
      },
    ],
    afData: [
      {
        AFCOUNT: 0,
      },
    ],
  };
  get newresultData() {
    let resultData = this.resultData;
    console.log(resultData);

    let list = [
      {
        name: "安防异常数据",
        value: resultData.afData && resultData.afData[0].AFCOUNT,
        itemStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#FF8E1B", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0,0.2)", // 100% 处的颜色
                },
              ],
              globalCoord: false, // 缺省为 false
            },
          },
        },
      },
      {
        name: "消防异常数据",
        value: resultData.xfData && resultData.xfData[0].XFCOUNT,
        itemStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#1466F7", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0,0.2)", // 100% 处的颜色
                },
              ],
              globalCoord: false, // 缺省为 false
            },
          },
        },
      },
      {
        name: "环境监测异常",
        value: resultData.hjData && resultData.hjData[0].HJCOUNT,
        itemStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#FC3C2D", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0,0.2)", // 100% 处的颜色
                },
              ],
              globalCoord: false, // 缺省为 false
            },
          },
        },
      },
    ];
    return list;
  }
  abnormal_colorList: Array<any> = ["#FF8E1B", "#FC3C2D"];

  // 初始化数据
  private initData() {
    // 详情页的数据列表
    this.queryAuxRealtimeList();
    // 详情页的确认/未确认报告
    (this as any).$services
      .wqrData({
        method: "get",
        data: {
          bdzId: this.formData.substation_value,
        },
      })
      .then((result: any) => {
        this.reportData = result.data;
      })
      .catch((err: object) => {
        console.log(err);
      });
    // 详情页的确认/未确认异常点
    (this as any).$services
      .wqrYcData({
        method: "get",
        data: {
          bdzId: this.formData.substation_value,
        },
      })
      .then((result: any) => {
        this.pointData = result.data;
      })
      .catch((err: object) => {
        console.log(err);
      });
    // 详情页的(安防、消防、环境)异常统计结果
    (this as any).$services
      .getAfhData({
        method: "get",
        data: {
          bdzId: this.formData.substation_value,
        },
      })
      .then((result: any) => {
        this.resultData = result.data;
        console.log(this.resultData);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  mounted() {
    this.initData();
    let ocx = this.init();
    ocx.setWindowsLayout(1);
    ocx.setTokenCallEvent(this.tokenCallEvent.bind(this));
    ocx.setCallBack();
  }
}
</script>

<style lang="scss" scoped>
.inspection-result-box {
  width: 100%;
  height: 100%;
  padding: 0 0.24rem 0.24rem 0.24rem;
  .plan-header-box {
    height: 0.3rem;
    margin-top: 0.1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .subtitle-box {
      height: 0.3rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .icon {
        width: 0.2rem;
        height: 0.2rem;
        border: 1px solid #fff;
        border-radius: 50%;
        span {
          color: #fff;
          font-size: 0.12rem;
        }
      }
      .name {
        font-size: 0.18rem;
        margin-left: 0.06rem;
      }
    }
    .return-btn {
      height: 0.3rem;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .return {
        width: 0.9rem;
        height: 0.3rem;
        text-align: right;
        > span {
          display: inline-block;
          width: 0.9rem;
          height: 0.3rem;
          background: url(../../../../assets/img/return.png) no-repeat;
          background-size: 100% 100%;
          vertical-align: middle;
          cursor: pointer;
        }
      }
    }
  }
  .cont-box {
    width: 100%;
    height: calc(100% - 0.5rem);
    margin-top: 0.1rem;
    .left {
      width: 6.44rem;
      height: 100%;
      // padding-top: 0.01px;
      .top {
        width: 100%;
        height: 63.26%;
        background: #122c75;
        border: 1px solid #27428f;
        .condition-search {
          height: 0.36rem;
          margin-top: 0.2rem;
        }
        .self-table {
          width: calc(100% - 0.2rem);
          height: calc(100% - 0.76rem);
          margin: 0.1rem auto;
          box-sizing: border-box;
          .normal {
            color: rgba(3, 204, 150, 1);
          }
          .abnormal {
            color: rgba(246, 91, 55, 1);
          }
        }
      }
      .bottom {
        width: 100%;
        height: 34.53%;
        background: #122c75;
        border: 1px solid #27428f;
        > div {
          width: 33%;
          height: 100%;
        }
      }
    }
    .right {
      width: 12.1rem;
      height: 100%;
      background: #124d9c;
    }
  }
}
</style>
<style lang="scss">
.inspection-result-box {
  // 选择框输入框的宽度
  .el-select .el-input .el-input__inner {
    // width: 2.4rem;
    font-size: 0.18rem;
    padding: 0px 10px;
  }
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    // width: 2.4rem;
    font-size: 0.18rem;
    padding: 0px 10px;
  }
  //   按钮样式
  .el-button {
    width: 1.1rem;
    height: 0.36rem;
    padding: 0;
  }
  // 表格修改
  // .el-table__body-wrapper {
  //   overflow: auto;
  //   height: calc(100% - 0.4rem);
  //   .el-table__body {
  //     height: 94%;
  //   }
  // }
  .el-form-item--medium .el-form-item__label {
    font-size: 0.18rem;
  }

  .el-date-editor--daterange.el-input__inner {
    width: 100%;
  }
}
</style>

